<template>
  <div class="file">

    <div class="box">
      <input type="file" id="file-upload-btn" @change="uploadFile()">
    </div>

    <div style="width: 0px;height: 0px;overflow: hidden">
      <Bus></Bus>
    </div>
  </div>
</template>

<script>
  import Bus from "@/components/file/Bus"
  import OSS from "ali-oss"

  /**
   * 其他地方使用该组件
   * this.Bus.$emit("my-event-file-small-upload",{})
   *
   * 重新获得该组件的值
   * this.Bus.$on("my-event-file-info", (data)=>{
   *   let ev = data.ev;
   *   let file = data.file;
   *   let fileInfo = data.fileInfo;
   * });
   */
  export default {
    name: "",
    components: {
      Bus
    },
    data() {
      return {
        //从哪个组件传过来的
        fromComponent: "",
        //文件URL
        fileUrl: ""
      }
    },
    methods: {
      //获取文件后缀
      getFileSuffix: function (fileName) {
        let split = fileName.split(".");
        return split[split.length - 1];
      },
      //处理文件URL，去除?后面的值
      handleFileUrl: function (fileUrl) {
        let split = fileUrl.split("?");
        return split[0];
      },
      //上传文件
      uploadFile: function (e) {
        let file = document.getElementById("file-upload-btn").files[0];

        /*请求OssToken*/
        this.axios.get(`/file/ossToken/sts`)
          .then((resp) => {
            if (resp.data.flag) {
              let data = resp.data.data;
              //根据后台返回的token生成OSS客户端
              let client = new OSS({
                region: data.region,
                accessKeyId: data.accessKeyId,
                accessKeySecret: data.accessKeySecret,
                stsToken: data.stsToken,
                bucket: data.bucket
              });
              //获取文件后缀名
              let suffix = this.getFileSuffix(file.name);
              let fileName;
              if (suffix != "") {
                fileName = data.fileId + "." + suffix;
              } else {
                fileName = data.fileId
              }

              let fileType = file.type;
              if (fileType.indexOf("jpeg") != -1) {
                fileType = "image/jpg"
              }
              //发送文件
              client.multipartUpload(fileName, file, {
                headers: {
                  "Content-Type": fileType
                }
              })
                .then((resp) => {
                  let url = resp.res.requestUrls[0]
                  this.fileUrl = this.handleFileUrl(url);
                  /*将后台返回的文件信息回传给  调用该组件的组件*/
                  this.Bus.$emit("my-event-bus-file", {
                    fromComponent: this.fromComponent,
                    data: {
                      fileUrl: this.fileUrl,
                      file: file,
                      resp: resp
                    }
                  })
                })
            }
          })
      }
    },
    mounted() {
      //接收其他地方传过来的值，用于上传
      this.Bus.$on("my-event-file-upload", (data) => {
        //记录从哪个组件调用文件上传
        this.fromComponent = data.fromComponent;

        //如果有其他的参数需要传给后台，就封装在 data里
        this.params = data || {};

        // 这里相当于用代码完成了用户点击事件，等于用户点击了  选择文件
        document.getElementById("file-upload-btn").click();
      });
    }
  }
</script>

<style scoped>

</style>
